<template>
  <div>
    <div class="header">个人管理模块 >> 个人中心</div>
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16">
        <div class="form">
          <div class="title">个人中心（管理员不可修改姓名）</div>
          姓名：
          <el-input
            class="input"
            :disabled="true"
            v-model="userRef.nickName"
          ></el-input>
          <br />
          <br />
          输入新密码：
          <el-input
            class="input"
            v-model="newPassword1"
            placeholder="请输入新密码"
            show-password
          ></el-input>
          <br />
          <br />
          确认新密码：
          <el-input
            class="input"
            v-model="newPassword2"
            placeholder="再次输入新密码"
            show-password
          ></el-input>
          <br />
          <br />
          <div class="tips" v-if="newPassword1 != newPassword2">
            (两次密码不一致)
          </div>
          <br />
          <br />
          <div class="btn-container">
            <el-button
              @click="updateAdminPassword"
              type="primary"
              round
              class="btn"
              :disabled="
                !(
                  newPassword1.length > 0 &&
                  newPassword2.length > 0 &&
                  newPassword1.length == newPassword2.length &&
                  newPassword1 == newPassword2
                )
              "
            >
              修改密码
            </el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { User } from "@/datasource/Type";
import { State } from "@/store";
import { useStore } from "vuex";
import { defineComponent, ref } from "vue";
import { UPDATE_ADMIN_PASSWORD } from "@/store/VuexTypes";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  setup() {
    const user = sessionStorage.getItem("user");
    const store = useStore<State>();
    const userRef = ref<User>({});
    const newPassword1 = ref<string>("");
    const newPassword2 = ref<string>("");
    const disabled = ref(true);
    const updateAdminPassword = () => {
      ElMessageBox.confirm("此操作将修改密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.dispatch(UPDATE_ADMIN_PASSWORD, {
            password: newPassword1.value,
          });
        })
        .catch(() => {
          //这是注释哟
        });
    };
    if (user) {
      userRef.value = JSON.parse(user);
    }
    return {
      userRef,
      newPassword1,
      newPassword2,
      disabled,
      updateAdminPassword,
    };
  },
});
</script>

<style scoped>
.header {
  width: 90%;
  padding: 5px 5px 10px;
  border-bottom: 1px solid #ccc;
  font-size: 12px;
  color: grey;
  margin-bottom: 20px;
}
.title {
  margin: 10px auto 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
}
.form {
  padding: 50px 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.input {
  width: 300px;
}
.tips {
  color: red;
  font-size: 14px;
}
.btn-container {
  display: flex;
  justify-content: center;
}
.btn {
  width: 200px;
}
</style>
